<template>
	<view >
		<view class="book-list u-skeleton">
			<view class="book-list-item" v-for="(item,index) in bookList" :key="item.id"  >
					<image :src="item.cover_url" mode="" class="u-skeleton-rect" @click="changeRoute(item.id)"></image>
					<view class="book-list-title  u-skeleton-rect">
						{{item.title ? item.title : "   " }}
					</view>
					<view class="book-list-item-price" v-if="bookList.length>0">
						<view class="price u-skeleton-rect">￥{{item.price}}</view>
						<view class="salce u-skeleton-rect"> {{item.collects_count}} 人购买</view>
					</view>
					<view class="no_car_data" v-else>购物车中没有商品 <text>立即订购</text></view>
			</view>
			
		</view>
	</view>
</template>

<script>
	// 导入eventbus
	import {eventBus} from'../main.js'
	export default{
		props:['bookList'],
		data(){
			return{
				// 获取书籍的id
				// id:0
			}
		},
		onLoad() {
			// this.show=
			// console.log(bookList)
		},
		methods:{
			changeRoute(res){
				this.id=res
				uni.setStorageSync('bookId',res)
				// console.log(index)
				uni.navigateTo({
					url: '/pages/bookDetail/bookDetail'
				});
				// 向书籍详情页面传递书籍id,处理兼容性问题
				uni.$on('send',res=>{
					uni.$emit('transmitId',this.id)
				})
				// uni.$emit('transmitId',index)
				
			},
		}
	}
</script>


<style lang="scss" scoped>
	.no_car_data {
		text-align: center;
		padding-top: 250rpx;
		color: #333333;
		font-size: 24rpx;
	
		text {
			color: #DB0E7E;
			margin-left: 5rpx;
		}
	}
	.book-list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	
		.book-list-item {
			width: 45%;
			height: 300px;
			margin-bottom: 30px;
		}
	}
	
	image {
		width: 100%;
		height: 60%;
	}
	
	.book-list-item-price {
		display: flex;
		justify-content: space-between;
	
		.price {
			color: red;
			width: 30%;
		}
	
		.salce {
			color: #C0C0C0;
			width: 50%;
		}
	}
	.book-list-title{
		overflow: hidden;
		text-overflow:ellipsis;
		margin: 20rpx 0 20rpx 0;
		white-space: nowrap;
	}
	.wrap {
		padding: 40rpx;
	}
	.wrap-section{
		margin-top: 30px;
	}
	uni-view{
		// z-index: 100 !important;
	}
</style>
